<!DOCTYPE html>
<html>
<head>
    <TITLE>绘图面板-蓝图图示</TITLE>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<META NAME="Keywords" CONTENT="蓝图图示,图示工具,画图工具,绘图工具,在线图示,思维画图,思维图示">
	<meta name="description" content="蓝图图示，在线图示画图工具">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta content="always" name="referrer">
	<link rel="stylesheet" href="main.css">
	<link rel="stylesheet" href="svg.select.css"/>
	<link rel="stylesheet" href="pure-min.css">
	 <!--[if lte IE 8]>
        <link rel="stylesheet" href="grid-old-ie.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
    
    <link rel="stylesheet" href="grid.css">
    <!--<![endif]-->
	<link rel="stylesheet" href="bootstrap-modal.css">
	<!--
	<link rel="stylesheet" href="bootstrap-popover.css">
	<link rel="stylesheet" href="bootstrap-panel.css">
	-->
	<link rel="stylesheet" href="bootstrap-pagination.css">
	<link rel="stylesheet" href="bootstrap-nav.css">
	<link rel="stylesheet" href="bootstrap.pager.css">
    <link rel="stylesheet" href="jquery-ui.min.css">
	<link rel="stylesheet" type="text/css" href="webuploader.css" />
	<link rel="stylesheet" type="text/css" href="cropper.v2.3.3.css" />
	<link rel="stylesheet" type="text/css" href="bootstrap-btn-form.css" />
	
	<style>
	* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
	}

	*:before,
	*:after {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.toolbar {
		z-index: 10003;
		font-size: 14px;
	}
	.element-edit-bar {
		background-color: #2E343C;
		padding-left: 5px;
		cursor: move;
	}
	.toolbar {
		position: absolute;
		cursor: default;
	}
	ol, ul, menu {
		list-style: none;
	}
	.element-edit-bar>li {
		float: left;
		width: 37px;
		height: 30px;
		cursor: pointer;
		color: #FFF;
		text-align: center;
		line-height: 30px;
		margin: 4px 0 4px 4px;
	}
	.element-edit-bar>li:hover {
		color: #00AEBB;
	}
	.toolbar>li {
		cursor: pointer;
	}
	
	#edit-color>.edit-color-span {
		width: 32px;
		height: 32px;
	}
	.edit-color-span {
		width: 26px;
		height: 26px;
		transform: scale(1);
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-o-transform: scale(1);
		-ms-transform: scale(1);
		transition: transform .1s;
		margin: 2px;
		float: left;
		border-radius: 5px;
		cursor: pointer;
	}
	.well {
	  min-height: 20px;
	  padding: 2px;
	  /*margin-bottom: 20px;*/
	  /*background: rgba(228, 94, 0, 1);
	  background:"#708090";*/
	  opacity:0.8;
	  border: 1px solid #e3e3e3;
	  #border-radius: 4px;
	  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	}
	.button-ext {
	 background-color:transparent;
	 padding: .1em .1em;
	}
	
	#wrapper {
		margin: 0 auto;margin: 1em;
		width: auto;
		height:400px;
		position: relative;
	}
	.upload-btn {
		background: #ffffff;
		border: 1px solid #cfcfcf;
		color: #565656;
		padding: 10px 18px;
		display: inline-block;
		border-radius: 3px;
		margin-left: 10px;
		cursor: pointer;
		font-size: 14px;

		/*position: absolute;*/
		right: 1em;
		bottom: 2em;
	}
	.upload-btn:hover {
		background: #f0f0f0;
	}
	
	.cropper-wraper {
		position: relative;
	}
	
	.webuploader-container-file{
		position:absolute;
       top: 20px; 
       left: 175.516px;
       width:168px;
	   height:44px;
       overflow:hidden;
	}
	/* Limit image width to avoid overflow the container */
	img {
		max-width: 100%; /* This rule is very important, please do not ignore this! */
	}
	
	#uploader .placeholder {
	    border: 3px dashed #e6e6e6;
	    min-height: 238px;
	    padding-top: 158px;
	    text-align: center;
	    background: url(./image.png) center 93px no-repeat;
	    color: #cccccc;
	    font-size: 18px;
	    position: relative;
	}

	#uploader .placeholder .webuploader-pick {
	    font-size: 18px;
	    background: #00b7ee;
	    border-radius: 3px;
	    line-height: 44px;
	    padding: 0 30px;
	    color: #fff;
	    display: inline-block;
	    margin: 20px auto;
	    cursor: pointer;
	    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	}

	#uploader .placeholder .webuploader-pick-hover {
	    background: #00a2d4;
	}
	
	#uploader .placeholder .flashTip {
	    color: #666666;
	    font-size: 12px;
	    position: absolute;
	    width: 100%;
	    text-align: center;
	    bottom: 20px;
	}
	#uploader .placeholder .flashTip a {
	    color: #0785d1;
	    text-decoration: none;
	}
	#uploader .placeholder .flashTip a:hover {
	    text-decoration: underline;
	}
	
	#uploader .placeholder.webuploader-dnd-over {
	    border-color: #999999;
	}
	
	#uploader .placeholder.webuploader-dnd-over.webuploader-dnd-denied {
	    border-color: red;
	}
	#imagezone{
		width: 50%;
		
	}
	.model_1{
		left:50%;
	}
	.model_mobile{
		left:80%;
	}
	 .btn-form-common {
	    font-size: 22px;
	    padding: 0;
	    line-height: 40px;
	    height: 40px;
	    color: #FFFFFF;
	    background: #9BC200;
	}
	.user-common-form {
	    
	    /* margin: 0; */
	    margin-right: 0px;
	    padding: 18px 10px 30px;
	    background-color: #FFFFFF;
	    border-radius: 5px;
	}
	.double-border {
       border: 1px solid #ddd;
        /*padding: 10px;
        margin:10px;*/
        background: #ffffff;
        vertical-align:middle;
	}
	.pure-u-1-2-ext{
	 	vertical-align:middle;
		padding-top:0px;
		padding-bottom:5px;
		padding-right:5px;
		padding-left:1px;
	}
	.grid-sizer,
	.grid-item {
		position:absolute; left:0px;
		margin-bottom: 10px;
		float: left;
		/*width: 160px;*/
		width: 22.5%;
		height:120px;
		background-color: #fff;
	    border-left: 1px solid #dedfe0;
	    border-right: 1px solid #dedfe0;
	    border-bottom: 3px solid #E3E4E5;
	    margin-right: 20px;
	    margin-top: 10px;
	    border:1px solid rgba(0,0,0,.08);
	}
	
	.container-fluid {
		position: relative; 
		padding: 0px;
		background: #DDD;
		padding: 0px;
		/*overFlow-x:hidden; 
	    overFlow-y:scroll;
	    */ 
	}
	/* clear fix */
	.container-fluid:after {
	  content: '';
	  display: block;
	  clear: both;
	}
	.grid-item img {
		display: block;
		max-width: 100%;
		max-height: 200px;
	}
	
	a.dt-woo-cat{
		position: absolute;
	    bottom: 10px;
	    /*right: 10px;*/
	    left:10px;
	    /* width: 56px; */
	    height: 25px;
	    line-height: 25px;
	    vertical-align: middle;
	    background-color: #fb3;
	    font-size: 12px;
	    color: #fff;
	    text-decoration: none;
	    text-align: center;
	    border-radius: 2px;
	}
	.dt-woo-desc{
		padding: 1px;
	}
	.dt-woo-title {
	    padding: 12px;
	}
	.dt-woo-title a {
	    font-size: 13px;
	    color: #444;
	    font-weight: 700;
	}
	.dt-woo-attr {
	    font-size: 12px;
	    color: #888;
	    padding: 0 12px 0px;
	}
	.errorHint{
		color:#e75c00
	}
	</style>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "//hm.baidu.com/hm.js?6d221bb715045782d5cc16288e1a2c58";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
	<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
	
	
	</script>
	
	<script src="constant.js"></script>
	<script src="svg236.js"></script>
	<script src="svg.draggable.js"></script>
	<script src="svg.select.js"></script>
	<script src="svg.resize.js"></script>
	<script src="jquery-1.12.0.min.js"></script>
	<script src="jquery.cookie-1.4.1.min.js"></script>
	<script src="jquery.md5.js"></script>
	<script src="scripts/Class.js"></script>
	<script src="jquery-ui.min.js"></script>
	<script src="masonry.pkgd.min.js"></script>
	<script src="imagesloaded.pkgd.min.js"></script>
	<script src="modules/commandstack.js"></script>
	<script src="modules/toolset.js"></script>
	<script src="modules/nav.js"></script>
	<script src="modules/user.js"></script>
	<script src="modules/mouse.event.js"></script>
	<script src="modules/home.js"></script>
	
</head>

<body>

<div id="layout" >
	<a href="#menu" id="menuLink" class="menu-link">
		<span></span>
	</a>

	<!--菜单-->
	<div id="menu">
		<div class="pure-menu pure-menu-open">
			<div class="pure-menu-heading"><b>蓝图图示&nbsp; <a href="#" id="userlable"></a></b> </div>
			<ul>
				<li class="pure-menu-selected"><a href="#" id="drawhref">画布</a></li>
				<li  ><a href="#" id="mypainthref">我的绘图</a></li>
				<li><a href="#" id="myiconhref">图案</a></li>
				<!--  <li><a href="#" id="cooperationhref">协作</a></li>-->
				<li><a href="guild.html" id="researchHref" target="_blank">图示研究</a></li>
				<li><a href="#" id="loginPageHref">登录</a></li>
				
			</ul>
		</div>
	</div>
	
	<div   id="myicon" style="display:none" >
		<div   id="myicon_content"></div>
		
    </div>

	<div id="mypaint" style="display:none" >
			<div   id="mypaint_content"></div>
			<!-- 
		   <nav>
			  <ul class="pager">
			    <li><a href="#" onclick="previous();">上一页</a></li>
			    <li><a href="#" onclick="next();">下一页</a></li>
			  </ul>
			</nav>-->
			
    </div>
    <div class="well pure-u-1" id="toolbar" style="display:block">
	<div onclick="tool_select(this)"  id="select" style="margin-left:50px;" class="pure-img pure-button  button-ext  " data-shape="select">
				
				<div  class="toolbar_box_item" >
					<image src="tool-images/select.png"/>
					</div>
					<div class="toolbar_box_item" >
					<small >选择</small>
					</div>
				</div>
				<div onclick="tool_select(this)"  id="rect" class="pure-img pure-button  button-ext  " data-shape="rect">
					<div  class="toolbar_box_item">
					<image src="tool-images/square.png"/>
					</div>
					<div class="toolbar_box_item" >
					<small >矩形</small>
					</div>
				</div>
				
				<!--
				<div onclick="tool_select(this)" id="fddraw" class="pure-img  pure-button button-ext " data-shape="fddraw">
					<div  class="toolbar_box_item">
					<image src="tool-images//line.png" style="vertical-align:middle;" />
					</div>
					<div class="toolbar_box_item" >
					<small>手绘</small>
					</div>
				</div>
				-->
				<div onclick="tool_select(this)" id="line" class="pure-img  pure-button button-ext " data-attr="" data-shape="line">
					<div  class="toolbar_box_item">
					<image src="tool-images//fhpath.png" style="vertical-align:middle;" />
					</div>
					<div class="toolbar_box_item" >
					<small>直线</small>
					</div>
				</div>
				<!--
				<div onclick="tool_select(this)" id="polygon" class="pure-img  pure-button button-ext "  data-shape="polygon">
					<div  class="toolbar_box_item">
					<image src="tool-images/polygon.png" style="vertical-align:middle;"/>
					</div>
					<div class="toolbar_box_item" >
					<small>多边形</small>
					</div>
				</div>
				 -->
				<div onclick="tool_select(this)" id="curve" class="pure-img  pure-button button-ext "  data-shape="curve">
					<div  class="toolbar_box_item">
					<image src="tool-images/freehand-circle.png" style="vertical-align:middle;"/>
					</div>
					<div class="toolbar_box_item" >
					<small>曲线</small>
					</div>
				</div>
				
				<div onclick="tool_select(this)" id="circle" class="pure-img  pure-button  button-ext " data-shape="circle">
					<div  class="toolbar_box_item">	
					<image src="tool-images/circle.png" style="vertical-align:middle;"/>
					</div>
					<div class="toolbar_box_item" >
						<small>圆形</small>
					</div>
				</div>
				<div onclick="tool_select(this)"  id="ellipse" class="pure-img  pure-button  button-ext  " data-shape="ellipse">
					<div  class="toolbar_box_item">
					<image src="tool-images/ellipse.png"/>
					</div>
					<div class="toolbar_box_item" >
					<small >椭圆</small>
					</div>
				</div>
				<div   onclick="tool_select(this)" id="image"  class="pure-img  pure-button button-ext" data-toggle="modal" data-shape="image">
					<div  class="toolbar_box_item">
					<image src="tool-images/image.png" style="vertical-align:middle;"/>
					</div>
					<div class="toolbar_box_item" >
					<small >图片</small>
					</div>
				</div>
				
				<div onclick="tool_select(this)" id="label" class="pure-img pure-button  button-ext " data-shape="label">
					<div  class="toolbar_box_item">
					<image src="tool-images/text.png" style="vertical-align:middle;"/>
					</div>	
					<div class="toolbar_box_item" >
					<small>文字</small>
					</div>
				</div>
				<!-- 
				<div onclick="tool_select(this)" id="4-vector" class="pure-img pure-button  button-ext " data-shape="4-vector">
					<div  class="toolbar_box_item">
					<image src="tool-images/wireframe.png" style="vertical-align:middle;"/>
					</div>	
					<div class="toolbar_box_item" >
					<small>四像限</small>
					</div>
				</div>
				<div onclick="tool_select(this)" id="4-vector" class="pure-img pure-button  button-ext " data-shape="4-vector">
					<div  class="toolbar_box_item">
					<image src="tool-images/wireframe.png" style="vertical-align:middle;"/>
					</div>	
					<div class="toolbar_box_item" >
					<small>商业模式</small>
					</div>
				</div>
				
				<div onclick="tool_select(this)" id="4-vector" class="pure-img pure-button  button-ext " data-shape="4-vector">
					<div  class="toolbar_box_item">
					<image src="tool-images/wireframe.png" style="vertical-align:middle;"/>
					</div>	
					<div class="toolbar_box_item" >
					<small>饼图</small>
					</div>
				</div> -->
				<div onclick="tool_select(this)" class="pure-img pure-button  button-ext"  id="tofront">
					<div  class="toolbar_box_item">
					<image src="tool-images/tofront.png" style="vertical-align:middle;"/>
					
					</div>
					<div class="toolbar_box_item" >
						<small >上移一层</small>
					</div>
				</div>
				<div onclick="tool_select(this)" class="pure-img pure-button  button-ext"  id="toback">
					<div  class="toolbar_box_item">
					<image src="tool-images/toback.png" style="vertical-align:middle;"/>
					
					</div>
					<div class="toolbar_box_item" >
						<small >下移一层</small>
					</div>
				</div>
				<div onclick="tool_select(this)" class="pure-img pure-button  button-ext"  id="delBbn">
					<div  class="toolbar_box_item">
					<image src="tool-images/delete.png" style="vertical-align:middle;"/>
					
					</div>
					<div class="toolbar_box_item" >
						<small >删除</small>
					</div>
				</div>
				<div onclick="tool_select(this)" class="pure-img pure-button  button-ext" id="undoBtn">
					<div  class="toolbar_box_item">
					<image src="tool-images/undo.png" style="vertical-align:middle;"/>
					</div>	
					<div class="toolbar_box_item" >
						<small >撤消</small>
					</div>
				</div>
				<div onclick="tool_select(this)" class="pure-img pure-button  button-ext" id="redoBtn">
					<div  class="toolbar_box_item">
					<image src="tool-images/redo.png" style="vertical-align:middle;"/>
					</div>
					<div class="toolbar_box_item" >
						<small >重做</small>
					</div>
				</div>
</div>
</div>
<div id="canvas" style="width:100%; background-color:#F5F5F5;"></div>
<div id="editToolPanel" style="position: absolute; display: none;width:100%; background-color:#F5F5F5;border: 1px solid #ddd;padding: 1px;margin:1px;width:50px;background-color:#CCCFFF;">
	<a href="#"  id="edittoobtn">编辑</a>
</div>
<div class="panel panel-default" id="editorPanel" style="position: absolute; border: 2px solid #ddd;padding: 1px;margin:1px;display: none;width=200px;background-color:#CCCCFF;">
		   <div class="panel-heading"  style="margin: 0 auto;line-height:0.4">
			  <div  style="display:inline-block;">
			  <h3 class="panel-title">
				<a href="#" id="editorsavebtn" onclick="$('#editorPanel').hide();">确定</a>
			  </h3>
			  </div><div style="float:right">
			  <h3 class="panel-title" >
				 <a href="#" onclick="$('#editorPanel').hide();">关闭</a>
			  </h3></div>

		   </div>
		   <div class="panel-body">
			<table>
				<tr id="wordattr" style="background-color:#F5F5F5;">
					<td >
					文字：
					<textarea rows="3" cols="50" id="txtInput" value=""></textarea>
				   </td>
				</tr>
				<tr id="fontattr" style="background-color:#F5F5F5;">
					<td >
					文字大小：
					<input type="input" id="fontsize" value="25"/>
				   </td>
				</tr>
				<tr id="colorattr" style="background-color:#F5F5F5;">
				  <td>
				  <div style="display:inline-block">
				      描边颜色：
					   <a href="#" onclick="showColorPanel('bdcolor');">选择</a>
				  <input type="hidden" style="width:100px" maxlength="8" id="bordercolorInput"
				   value="#000000" onclick="showColorPanel('bdcolor');"/>
				  <div   id="bdcolor-block"  style="float:right;margin: 2px;border-radius: 5px;height:26px;width:26px;background-color: #000000;"></div>
				  </div>
				  <div style="display:inline-block">
				 
				  <lable id="colorInputlabel">填充色：</lable>
				  <a href="#" onclick="showColorPanel('bgcolor');">选择</a>
				  <input maxlength="8" style="width:100px" type="hidden" id="colorInput" 
				  value="#d8d8d8" />
				  <div  id="bgcolor-block" style="float:right;margin: 2px;border-radius: 5px;height:26px;width:26px;background-color: #ff786c;"></div>
				  </div>
				 

				   <table style="display:none;" id="colorPanel"><tr><td>
				   <input type="hidden" id="color-for" value="bgcolor"/>
				   <div  class="edit-color-span" style="background-color: #535C65;"></div>
				   <div class="edit-color-span" style="background-color:#242424"></div>
				   <div class="edit-color-span" style="background-color:#484848"></div>
				   <div class="edit-color-span" style="background-color:#6c6c6c"></div>
				   <div class="edit-color-span" style="background-color:#909090"></div>
				   <div class="edit-color-span" style="background-color:#b4b4b4"></div>
				   <div class="edit-color-span" style="background-color:#d8d8d8"></div>
				   <div class="edit-color-span" style="background-color:#ffffff"></div>
				   <div class="edit-color-span" style="background-color:#ff786c"></div>
				   <div class="edit-color-span" style="background-color:#ffec33"></div>
				   </td></tr><tr><td>
				   <div class="edit-color-span" style="background-color:#dcff65"></div>
				   <div class="edit-color-span" style="background-color:#a3ffb4"></div>
				   <div class="edit-color-span" style="background-color:#a1e0ff"></div>
				   <div class="edit-color-span" style="background-color:#8babde"></div>
				   <div class="edit-color-span" style="background-color:#b39fff"></div>
				   <div class="edit-color-span" style="background-color:#ffced1"></div>
				   <div class="edit-color-span" style="background-color:#e30b20"></div>
				   <div class="edit-color-span" style="background-color:#ffcc00"></div>
				   <div class="edit-color-span" style="background-color:#8dc12e"></div>
				   <div class="edit-color-span" style="background-color:#27e334"></div>
				   </td></tr><tr><td>
				   <div class="edit-color-span" style="background-color:#29adb9"></div>
				   <div class="edit-color-span" style="background-color:#15a2e9"></div>
				   <div class="edit-color-span" style="background-color:#88599f"></div>
				   <div class="edit-color-span" style="background-color:#f99da0"></div>
				   <div class="edit-color-span" style="background-color:#d4361d"></div>
				   <div class="edit-color-span" style="background-color:#f19725"></div>
				   <div class="edit-color-span" style="background-color:#4e8d00"></div>
				   <div class="edit-color-span" style="background-color:#009900"></div>
				   <div class="edit-color-span" style="background-color:#084b9c"></div>
				   <div class="edit-color-span" style="background-color:#126ab4"></div>
				   </td></tr><tr><td>
				   <div class="edit-color-span" style="background-color:#5e2083"></div>
				   <div class="edit-color-span" style="background-color:#e10e51"></div>
				   <div class="edit-color-span" style="background-color:#a2050e"></div>
				   <div class="edit-color-span" style="background-color:#ea611d"></div>
				   <div class="edit-color-span" style="background-color:#475a00"></div>
				   <div class="edit-color-span" style="background-color:#075322"></div>
				   <div class="edit-color-span" style="background-color:#011e56"></div>
				   <div class="edit-color-span" style="background-color:#1f015b"></div>
				   <div class="edit-color-span" style="background-color:#500546"></div>
				   <div class="edit-color-span" style="background-color:#7e0643"></div>
				   </td></tr></table>
				   
				   </td>
				</tr>
			  <tr id="arrowattr" style="background-color:#F5F5F5;">
				   <td>
				   <input type="checkbox" id="arrow" value="start"/>左箭头
				   <input type="checkbox" id="arrow-right" value="start"/>右箭头
				   </td>
			   </tr>
			   <tr id="circelattr" style="background-color:#F5F5F5;">
				   <td>
				   半径x：<input type="input" id="circle-radius-x" value="0"/>
				   半径y：<input type="input" id="circle-radius-y" value="0"/>
				   </td>
			   </tr>
			   <tr id="dashattr" style="background-color:#F5F5F5;">
				   <td>
						 <select id="dashline">
						    <option value="0, 0">实线</option>
						 	<option value="5, 5">虚拟1</option>
						 	<option value="5, 10">虚拟2</option>
						 	<option value="10, 5">虚拟3</option>
						 	
						 </select>
				   </td>
			   </tr>
			</table>
		   </div>
</div>
<div id="btn_group" style="text-align:center; background-color:#F5F5F5;">
	<form class="pure-form pure-form-aligned">
		<input type="hidden" id="color" value="#FF9900"/>
       <textarea style="height: 35px;" id="paint_desc" placeholder="请输入作品描述"></textarea>
      
		<button  class=" pure-button  pure-button-primary"  id="saveBtn">保存</button>
    </form>
</div>
<div id="loginzone" class="modal hide fade in"  style="display: none;" tabindex="-1" role="dialog" >
  <div class="modal-dialog modal-sm">
   <div class="modal-content">
	<ul class="nav nav-tabs" style="margin: 5px;" id="loginpanel">
	<li role="presentation" class="active"><a id="logintabhref" href="#logintab" aria-controls="logintab" role="tab" data-toggle="tab">登录</a></li>
    <li role="presentation"><a href="#registertab" aria-controls="registertab" role="tab" data-toggle="tab">注册</a></li>
	</ul>
	<div class="tab-content">

    <div role="tabpanel" class="tab-pane in active" id="logintab">
    
		
				    <form id="loginform" class="user-common-form" onsubmit="return false;" role="form"  method="post">
					  <div class="errorHint" style="display:none" id="formHint">
					    		<span >*用户或者密码不正确</span>
					  </div>
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
					    <div class="col-sm-10">
					      <input type="text" class="form-control" style="height:45px" name="userid" id="userid" placeholder="用户名">
					    </div>
					    <div class="errorHint" style="display:none" id="useridHint">
					    	<span >*请输入用户名</span>
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
					    <div class="col-sm-10">
					      <input type="password" class="form-control" style="height:45px" name="password" id="password" placeholder="密码">
					    </div>
					    <div class="errorHint" style="display:none" id="passwordHint">
					    	<span >*请输入密码</span>
					    </div>
					  </div>
					  <div class="form-group">
						   <label for="inputEmail3" class="col-sm-2 control-label">验证码</label>
						   <div class="col-sm-10">
		
		
								<div style="float:left;width:50%;">
						          <input type="text" class="form-control " style="height:45px;"   name="checkCode" id="checkCode" placeholder="验证码">
								</div>
								
								<div style="float:right;width:50%;">
								<img style="padding-left:10px;" src="http://www.lantudrawing.com/draw/code" id="login-checkCodeImage"  title="看不清可单击图片刷新" onclick="this.src='http://www.lantudrawing.com/draw/code?d='+Math.random();">
								<lable><a href="#" >忘记密码</a></lable>
								</div>
								<div style="clear:both;"></div>
						   </div>
						   <div class="errorHint" style="display:none" id="checkCodeHint">
					    		<span >*请输入验证码</span>
					    	</div>
				  	  </div>
				  	  
					  <div class="form-group">
					    <div class="col-sm-offset-2 col-sm-10">
					      <button type="submit" id="model_login_btn" class="btn btn-form-common form-control"><span>登录</span></button>
					    </div>
					  </div>
					</form>
				
	</div>
	
    <div role="tabpanel" class="tab-pane   fade" id="registertab">
     	 <div class="errorHint" style="display:none" id="registerformHint">
			<span >*用户或者密码不正确</span>
		 </div>
		 <form id="registerform" class="user-common-form" onsubmit="return false;" role="form"  method="post">
				  <div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" style="height:45px" name="userid" id="userid" placeholder="用户名">
				    </div>
				    <div class="errorHint" style="display:none" id="useridHint">
					    	<span >*请输入用户名</span>
					</div>
				  </div>
				  
				  <div class="form-group">
				    <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" style="height:45px" name="password" id="password" placeholder="密码">
				    </div>
				    <div class="errorHint" style="display:none" id="passwordHint">
					  <span >*请输入密码</span>
				  	</div>
				  </div>
				  
				  <div class="form-group">
				   <label for="inputEmail3" class="col-sm-2 control-label">验证码</label>
				   <div class="col-sm-10">


						<div style="float:left;width:50%;">
				          <input type="text" class="form-control " style="height:45px;"   name="checkCode"  id="checkCode" placeholder="验证码">
						</div>
						<div style="float:right;width:50%;"><img style="padding-left:10px;" id="checkCodeImage" src="/draw/code" title="看不清可单击图片刷新" onclick="this.src='/draw/code?d='+Math.random();"></div>

				   </div>
				   <div class="errorHint" style="display:none" id="checkCodeHint">
						<span >*请输入验证码</span>
				   </div>
				  </div>
				  <div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
					      <button type="submit" id="model_register_btn" class="btn btn-form-common form-control"><span>注册</span></button>
					    </div>
				  </div>
				</form>
	</div>
	
  </div>
  </div>
	</div>
</div>
<div id="imagezone" style="display:none;" class="modal model_1 hide fade in"   tabindex="-1" role="dialog">

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" style="margin: 5px;" id="imgtoolpanel">
    <li role="presentation" class="active"><a id="myiconsethref" href="#myiconset" aria-controls="myiconset" role="tab" data-toggle="tab">我的图案</a></li>
    <li role="presentation"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">上传图片</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
   <div role="tabpanel" class="tab-pane  in active" id="myiconset">
		<div class="container-fluid" id="iconsfluidDiv">
		</div>
		<!-- 
		<div id="page_nav">
	    	<input type="button" id="next_link" onclick="more();" value="下一页"/>
		</div>
		 -->
	</div>
    <div role="tabpanel" class="tab-pane fade" id="home">
		
		<!--上传区域-->
		<div id="wrapper">
			
			<div class="uploader-container" id="uploader">
				<!-- <div id="filePicker">选择文件</div> -->
				<div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>1.将照片拖到这里2.点击本区域，粘贴图片</p>
                </div>
			</div> 
 		
			<!-- Croper container -->
			<div class="cropper-wraper webuploader-element-invisible">
				<div class="img-container">
					<img src="" alt="" />
				</div>

				<div class="upload-btn">上传所选区域</div>
				<div class="btn">返回</div>
			</div>
		</div>
	
		<!--上传区域结束-->
	</div>
   
 
  </div>

</div>



<script src="bootstrap.min.js"></script>
<!--
<script src="bootstrap-tab.js"></script>
<script src="bootstrap-transitions.js"></script>
-->
<script src="template.js"></script>
<script type="text/javascript" src="webuploader.js"></script>
<script type="text/javascript" src="uploader.js"></script>
<script type="text/javascript" src="cropper.v2.3.3.js"></script>

<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"16"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
 <script>
 (function (window, document) {

	    var layout   = document.getElementById('layout'),
	        menu     = document.getElementById('menu'),
	        menuLink = document.getElementById('menuLink')
	        //,content  = document.getElementById('main');

	    function toggleClass(element, className) {
	        var classes = element.className.split(/\s+/),
	            length = classes.length,
	            i = 0;

	        for(; i < length; i++) {
	          if (classes[i] === className) {
	            classes.splice(i, 1);
	            break;
	          }
	        }
	        // The className is not found
	        if (length === classes.length) {
	            classes.push(className);
	        }

	        element.className = classes.join(' ');
	    }

	    function toggleAll(e) {
	        var active = 'active';

	        e.preventDefault();
	        toggleClass(layout, active);
	        toggleClass(menu, active);
	        toggleClass(menuLink, active);
	    }

	    menuLink.onclick = function (e) {
	        toggleAll(e);
	    };

	    /*content.onclick = function(e) {
	        if (menu.className.indexOf('active') !== -1) {
	            toggleAll(e);
	        }
	    };*/

	}(this, this.document));
 
	 $(function () {
		 $('#myiconsethref').on('show.bs.tab', function (e) {
			  //e.target // newly activated tab  e.relatedTarget // previous active tab
			  $("#fluidframe")[0].contentWindow.loading_share_icons(1);
		})
	})
 </script>
</body>



</html>
